<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师控制面板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        body {
            background-color: #f5f5f5;
        }
        .container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
        }
        .sidebar h2 {
            text-align: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #445566;
            margin-bottom: 20px;
        }
        .sidebar ul {
            list-style: none;
        }
        .sidebar li {
            padding: 12px 25px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .sidebar li:hover, .sidebar li.active {
            background-color: #34495e;
        }
        .main-content {
            flex: 1;
            padding: 30px;
        }
        .section {
            display: none;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 25px;
            margin-bottom: 30px;
        }
        .section.active {
            display: block;
        }
        h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            color: #2c3e50;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f8f9fa;
        }
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        .btn-primary {
            background-color: #3498db;
        }
        .btn-primary:hover {
            background-color: #2980b9;
        }
        .btn-success {
            background-color: #2ecc71;
        }
        .btn-success:hover {
            background-color: #27ae60;
        }
        .btn-danger {
            background-color: #e74c3c;
        }
        .btn-danger:hover {
            background-color: #c0392b;
        }
        .btn-warning {
            background-color: #f39c12;
        }
        .btn-warning:hover {
            background-color: #e67e22;
        }
        .search-bar {
            display: flex;
            margin-bottom: 20px;
        }
        .search-bar input {
            flex: 1;
            margin-right: 10px;
        }
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .card-header {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .card-body {
            margin-bottom: 15px;
        }
        .card-footer {
            padding-top: 15px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
        }
        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }
        .badge-primary {
            background-color: #3498db;
        }
        .badge-success {
            background-color: #2ecc71;
        }
        .badge-warning {
            background-color: #f39c12;
        }
        .badge-danger {
            background-color: #e74c3c;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal.active {
            display: flex;
        }
        .modal-content {
            background-color: white;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-title {
            font-weight: bold;
            font-size: 18px;
        }
        .modal-close {
            font-size: 24px;
            cursor: pointer;
            background: none;
            border: none;
            color: #777;
        }
        .modal-body {
            padding: 20px;
        }
        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h2>教师控制台</h2>
            <ul>
                <li class="menu-item active" data-section="apply-courses-section">申请选修课程</li>
                <li class="menu-item" data-section="students-section">学生信息</li>
                <li class="menu-item" id="logout">退出登录</li>
            </ul>
        </div>
        
        <div class="main-content">
            <!-- 申请选修课程 -->
            <div class="section active" id="apply-courses-section">
                <h3>申请选修课程</h3>
                <form id="apply-course-form" action="/CourseApplication" method="post">
                    <!-- 教师信息 -->
                    <div class="form-group">
                        <label for="teacher_id">教师ID</label>
                        <input type="number" id="teacher_id" name="teacher_id" required>
                    </div>
                    <div class="form-group">
                        <label for="teacher_name">教师姓名</label>
                        <input type="text" id="teacher_name" name="teacher_name">
                    </div>
                    <div class="form-group">
                        <label for="contact_information">联系方式</label>
                        <input type="number" id="contact_information" name="contact_information" required>
                    </div>

                    <!-- 课程信息 -->
                    <div class="form-group">
                        <label for="course_id">课程ID</label>
                        <input type="number" id="course_id" name="course_id" required>
                    </div>
                    <div class="form-group">
                        <label for="course_name">课程名称</label>
                        <input type="text" id="course_name" name="course_name">
                    </div>
                    <div class="form-group">
                        <label for="xue_fen">学分</label>
                        <input type="number" id="xue_fen" name="xue_fen" min="0" step="0.5" required>
                    </div>
                    <div class="form-group">
                        <label for="xue_shi">学时</label>
                        <input type="number" id="xue_shi" name="xue_shi" min="0" required>
                    </div>
                    <div class="form-group">
                        <label for="course_information">课程描述</label>
                        <textarea id="course_information" name="course_information" rows="5"></textarea>
                    </div>
                    
                    <button type="submit" class="btn-primary">提交申请</button>
                </form>
            </div>
            
            <!-- 学生信息 -->
            <div class="section" id="students-section">
                <h3>我的学生</h3>
                
                <div class="search-bar">
                    <input type="text" placeholder="搜索学生...">
                    <button class="btn-primary">搜索</button>
                </div>
                
                <div class="form-group">
                    <label for="course-filter">选择课程</label>
                    <select id="course-filter">
                        <option value="all">所有课程</option>
                        <option value="CS201">数据结构 (CS201)</option>
                        <option value="CS101">计算机导论 (CS101)</option>
                    </select>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>班级</th>
                            <th>课程</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2021001</td>
                            <td>王小明</td>
                            <td>计算机科学1班</td>
                            <td>数据结构 (CS201)</td>
                            <td class="action-buttons">
                                <button class="btn-primary view-student-details" data-student="2021001">查看详情</button>
                            </td>
                        </tr>
                        <tr>
                            <td>2021002</td>
                            <td>李丽</td>
                            <td>软件工程2班</td>
                            <td>数据结构 (CS201)</td>
                            <td class="action-buttons">
                                <button class="btn-primary view-student-details" data-student="2021002">查看详情</button>
                            </td>
                        </tr>
                        <tr>
                            <td>2021003</td>
                            <td>张强</td>
                            <td>计算机科学1班</td>
                            <td>计算机导论 (CS101)</td>
                            <td class="action-buttons">
                                <button class="btn-primary view-student-details" data-student="2021003">查看详情</button>
                            </td>
                        </tr>
                        <tr>
                            <td>2021004</td>
                            <td>刘芳</td>
                            <td>软件工程2班</td>
                            <td>计算机导论 (CS101)</td>
                            <td class="action-buttons">
                                <button class="btn-primary view-student-details" data-student="2021004">查看详情</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- 学生详情模态框 -->
    <div class="modal" id="student-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">学生详细信息</div>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>学号</label>
                    <p id="modal-student-id">2021001</p>
                </div>
                <div class="form-group">
                    <label>姓名</label>
                    <p id="modal-student-name">王小明</p>
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <p id="modal-student-gender">男</p>
                </div>
                <div class="form-group">
                    <label>班级</label>
                    <p id="modal-student-class">计算机科学1班</p>
                </div>
                <div class="form-group">
                    <label>院系</label>
                    <p id="modal-student-department">计算机科学与技术学院</p>
                </div>
                <div class="form-group">
                    <label>联系电话</label>
                    <p id="modal-student-phone">13700137000</p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-primary" id="close-modal">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- 课程学生列表模态框 -->
    <div class="modal" id="course-students-modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">课程学生列表</div>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <h4 id="modal-course-title">数据结构 (CS201) 学生列表</h4>
                <table>
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>班级</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="modal-students-list">
                        <!-- 这里会动态填充学生列表 -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn-primary" id="close-students-modal">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 菜单切换功能
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function() {
                if (this.id === 'logout') {
                    // 处理登出逻辑
                    if (confirm('确定要退出登录吗？')) {
                        window.location.href = 'index.html';
                    }
                    return;
                }
                
                // 移除所有菜单项的active类
                document.querySelectorAll('.menu-item').forEach(i => {
                    i.classList.remove('active');
                });
                
                // 为当前菜单项添加active类
                this.classList.add('active');
                
                // 隐藏所有section
                document.querySelectorAll('.section').forEach(section => {
                    section.classList.remove('active');
                });
                
                // 显示对应的section
                const targetSection = this.getAttribute('data-section');
                document.getElementById(targetSection).classList.add('active');
            });
        });
        
        // 修改后的表单提交处理
        document.getElementById('apply-course-form').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交
            const formData = new FormData(this);

            fetch(this.action, {
                method: 'POST',
                body: new URLSearchParams(formData),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
            })
              alert('课程申请已提交，等待管理员审批！');
              this.reset(); // 提交成功后清空表单
            })
        });
        
        // 查看学生详情
        document.querySelectorAll('.view-student-details').forEach(btn => {
            btn.addEventListener('click', function() {
                const studentId = this.getAttribute('data-student');
                // 这里应该通过后端API获取学生详情，这里只是演示
                document.getElementById('student-modal').classList.add('active');
            });
        });
        
        // 查看课程学生
        document.querySelectorAll('.view-students').forEach(btn => {
            btn.addEventListener('click', function() {
                const courseId = this.getAttribute('data-course');
                // 设置模态框标题
                document.getElementById('modal-course-title').textContent = 
                    courseId === 'CS201' ? '数据结构 (CS201) 学生列表' : '计算机导论 (CS101) 学生列表';
                
                // 清空学生列表
                const studentsList = document.getElementById('modal-students-list');
                studentsList.innerHTML = '';
                
                // 根据课程ID获取不同的学生列表数据
                let studentsData = [];
                if (courseId === 'CS201') {
                    studentsData = [
                        { id: '2021001', name: '王小明', class: '计算机科学1班' },
                        { id: '2021002', name: '李丽', class: '软件工程2班' }
                    ];
                } else if (courseId === 'CS101') {
                    studentsData = [
                        { id: '2021003', name: '张强', class: '计算机科学1班' },
                        { id: '2021004', name: '刘芳', class: '软件工程2班' }
                    ];
                }
                
                // 填充学生列表
                studentsData.forEach(student => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${student.id}</td>
                        <td>${student.name}</td>
                        <td>${student.class}</td>
                        <td class="action-buttons">
                            <button class="btn-primary view-student-modal" data-student="${student.id}">查看详情</button>
                        </td>
                    `;
                    studentsList.appendChild(row);
                });
                
                // 显示模态框
                document.getElementById('course-students-modal').classList.add('active');
            });
        });
        
        // 关闭模态框
        document.querySelectorAll('.modal-close').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.modal').classList.remove('active');
            });
        });
        
        document.getElementById('close-modal').addEventListener('click', function() {
            document.getElementById('student-modal').classList.remove('active');
        });
        
        document.getElementById('close-students-modal').addEventListener('click', function() {
            document.getElementById('course-students-modal').classList.remove('active');
        });
        
        // 当点击模态框内的查看学生详情按钮时
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('view-student-modal')) {
                document.getElementById('course-students-modal').classList.remove('active');
                document.getElementById('student-modal').classList.add('active');
            }
        });
        
        // 课程筛选功能
        document.getElementById('course-filter').addEventListener('change', function() {
            const value = this.value;
            const rows = document.querySelectorAll('#students-section table tbody tr');
            
            rows.forEach(row => {
                const courseCell = row.querySelector('td:nth-child(4)').textContent;
                if (value === 'all' || courseCell.includes(value)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>
